<template>
  <div class="m_css" @click="kk">
    <!--<div class="wrap-2">
      <div class="body">
        <div class="main-2">
          <div class="main-wrap-2">
            <p>main-wrap</p>
            <p>main-wrap</p>
          </div>
        </div>
        <div class="sub-2">
          <p>sub</p>
          <p>sub</p>
          <p>sub</p>
        </div>
        <div class="extra-2">
          <p>extra</p>
          <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
        </div>
      </div>
    </div>
    <div class="m-cs-1">
      <div class="m-cs-item"></div>
    </div>
    <div class="parent">
      <div class="left">
        <p>left</p>
      </div>
      <div class="right">
        <p>right</p>
        <p>right</p>
      </div>
    </div>-->
    <div class="box">
      <ul>
        <li>{{example}}</li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "m_css",
    data () {
      return {
        example: 2
      }
    },
    methods: {
      kk () {
        this.example = 5
      }
    },
    computed: {
      hand () {
        return 4
      }
    },
    mounted () {
      console.log(this)
    }
  }
</script>

<style scoped lang="less" type="text/less">
  .m_css {
    .body {
      overflow: hidden;
      *zoom: 1;
    }
    .wrap-2 {
      margin-top: 30px;
    }
    .wrap-2 .main-2 {
      float: left;
      width: 100%;
      margin-bottom: -3000px;
      padding-bottom: 3000px;
      background: #F90;
      main-wrap-2 {
        margin: 0 200px 0 150px;
      }
    }
    .wrap-2 .sub-2 {
      float: left;
      margin-left: -100%;
      width: 150px;
      background: #6C0;
      margin-bottom: -3000px;
      padding-bottom: 3000px;
    }
    .wrap-2 .extra-2 {
      float: left;
      margin-left: -200px;
      width: 200px;
      background: #F9F;
      margin-bottom: -3000px;
      padding-bottom: 3000px;
    }
  }
</style>
<style scoped lang="less" type="text/less">
  .m_css {
    .m-cs-1 {
      position: absolute;
      width: 50%;
      margin-right: 100px;
      background-color: #48576a;

      .m-cs-item {
        height: 100px;
        margin: 50px -60px;
        background-color: green;
      }

    }
    .left {

      float: left;

      width: 100px;
      background-color: green;

      margin-right: 20px;

    }

    .right {
      background-color: red;
      overflow: hidden;

    }

  }

  .box {
    background-color: orange;
    margin: auto;
    width: 900px;

    ul {
      margin-right: -20px;
      overflow: hidden;

      li {
        width: 280px;
        height: 300px;
        margin-right: 20px;
        float: left;
        background-color: green;
      }

    }
  }
</style>
